<template>
  <div class="">
    <plate-card title="环境信息">
      <div class="px-2 py-4">
        <el-row>
          <el-col v-for="(item, index) in dataList" :key="index" :span="6" class="flex flex-col items-center justify-center">
            <el-avatar :size="60" :src="item.icon"></el-avatar>
            <div class="mt-2 text-[#6AE0FD] font-bold text-[24px]">{{ item.value }}</div>
            <div class="mt-1 text-[16px]">{{ item.title }}</div>
          </el-col>
        </el-row>
      </div>
    </plate-card>
  </div>
</template>

<script lang="ts" setup>
  import PlateCard from '@/components/plate-card.vue'
  import { reactive, ref } from 'vue'
  import CardHeader from '@/assets/vue.svg'

  const dataList = ref([
    { icon: CardHeader, value: '17', title: '温度(℃)' },
    { icon: CardHeader, value: '23', title: '温度(℃)' },
    { icon: CardHeader, value: '216', title: '温度(℃)' },
    { icon: CardHeader, value: '280', title: '温度(℃)' }
  ])
</script>

<style scoped></style>
